
import React from 'react'
import Css from "./index.module.scss";
import { connect } from "react-redux"
//给当前组件添加history match location
// 引入withRouter,可以实现路由跳转
import { withRouter } from "react-router-dom"


class CityInput extends React.Component {
    // 声明自定义属性
    static defaultProps = {
        iconColor: "#fff"
    }
    render() {
        console.log(this.props);  //测试props属性  拿到了history对象，就可以进行编程式导航进行路由跳转
        const { history } = this.props;
        return (
            <div className={Css.city_input_row}>
                <div className={Css.city_input}>
                    <div onClick={() => history.push('/citySelect')} className={Css.city_name}>{this.props.cityName}</div>
                    <div className={Css.city_search}>
                        <i className={['iconfont', 'icon-seach', Css.city_input_icon_search].join(' ')}></i>
                        <span>请输入小区或地址</span>
                    </div>
                </div>
                <div onClick={() => history.push('/mapFound')} className={Css.city_input_row_icon}>
                    <i style={{ color: this.props.iconColor }} className={['iconfont', 'icon-map', Css.city_input_icon_map].join(' ')}></i>
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    cityName: state.CityReducer.cityname.name
})
//connect  //增强组件获取全局数据的能力
// withRouter   增强组件获取路由信息的能力
export default withRouter(connect(mapStateToProps)(CityInput));
